/**
 *  *******************useState*******************
 *  回调函数的参数
 *  使用场景:参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。
 *           如果初始state需要通过计算才能获得，则可以传入一个函数，
 *           在函数中计算并返回初始的state，此函数只在初始渲染时被调用。
 * 
 */

import { useState } from "react"

function Counter (props) {
  // const [count, setCount] = useState(props.count) //这样写 也是一样的效果

  const [count, setCount] = useState(() => {
    // 只要无法直接确定 需要通过一定的操作才能获取 就可以理解为计算
    // 循环遍历一万条数据才能确定这里的初始值是什么
    return props.count
  })
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>自增</button>
    </div>
  )
}
function App () {

  return (
    <div>
      <Counter count={10}></Counter>
      <Counter count={20}></Counter>
    </div>
  )
}
export default App
